<!-- 
   CSS面试题：
    1）布局
      盒子模型的宽度如何计算
      margin纵向重叠问题
      margin的负值问题
      BFC理解和应用
      float布局，以及clearfix
      flex画色子
    2）定位
      absolute和relative分别依据什么定位
      居中对齐有哪些实现方式 
    3）图文样式
      line-height的继承问题
    4）适配（响应式）
      rem是什么
      如何实现适配（响应式）
    5）CSS3（不是重点）
 -->

<!-- 如何实现圣杯布局和双飞翼布局 -->
<!-- 
  圣杯布局和双飞翼布局：
    三栏布局，中间一栏随着宽度自适应，两侧内容固定。
    内容是最重要的，最先加载和渲染。

  如何实现：
    1）使用float布局
    2）两侧使用margin负值，以便和中间内容横向重叠
    3）为了防止中间内容被两侧覆盖，圣杯布局使用padding，双飞翼布局使用margin
 -->


<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    body {
      min-width: 550px;
    }

    .col {
      float: left;
    }

    #main {
      height: 200px;
      width: 100%;
      background-color: #ccc;
    }

    #main-wrap {
      margin: 0 190px 0 190px;
    }

    #left {
      width: 190px;
      height: 200px;
      background-color: #0000FF;
      margin-left: -100%;
    }

    #right {
      width: 190px;
      height: 200px;
      background-color: #FF0000;
      margin-left: -190px;
    }
  </style>
</head>

<body>
  <div id="main" class="col">
    <div id="main-wrap">
      this is main
    </div>
  </div>
  <div id="left" class="col">
    this is left
  </div>
  <div id="right" class="col">
    this is right
  </div>
</body>

</html>